<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>歌曲搜索</title>
    <link type="text/css"  rel="stylesheet"
    href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css"></link>
    <link rel='stylesheet' type='text/css' href='css/songlistbody.css'>
    <link type="text/css"  rel="stylesheet"
    href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap-theme.css"></link>
    <link rel="stylesheet" type="text/songsearch.css" href="css/songsearch.css">
    <script type="text/javascript" src="js/jquery-1.9.js"></script>
    <script type="text/javascript" src="js/songsearch.js"></script>
</head>
<body>
     <div id="div1">
         <div id="head">
           <img src="images/yinyue.jpg" alt="">
         </div>
         <div id="navigation">
           <ul class="nav nav-tabs nav-justified">
                  <li role="presentation" id="li1" onmouseover="getsongList()"><a href="#">排行榜</a></li>
                  <li role="presentation" id="li2" onmouseover="getsongList2()"><a href="#">歌手</a></li>
                  <li role="presentation" id="li3" onmouseover="getsongList3()"><a href="#">专辑</a></li>
                  <li role="presentation" id="li4" onmouseover="getsongList4()"><a href="#">其他搜索</a></li>
           </ul>

         </div>
         <div id="body">
             <div id="singerbody">
                  <div class="songsinger">
                      <img src="images/singer1.jpg" alt="">
                      <p>1st<br />
                      薛之谦</p>
                  </div>
                  <div class="songsinger">
                      <img src="images/singer2.jpg" alt="">
                      <p>2nd<br />
                      陈奕迅</p>
                  </div>
                  <div class="songsinger">
                      <img src="images/singer3.jpg" alt="">
                      <p>3rd<br />
                      周杰伦</p>
                  </div>
                  <div class="songsinger">
                      <img src="images/singer4.jpg" alt="">
                      <p>4th<br />
                      冷漠</p>
                  </div>
                  <div class="songsinger">
                      <img src="images/singer6.jpg" alt="">
                      <p>5th<br />
                      林俊杰</p>
                  </div>
                  <div class="songsinger">
                      <img src="images/singer5.jpg" alt="">
                      <p>6th<br />
                      张学友</p>
                  </div>
                  <div class="songsinger">
                      <img src="images/singer7.jpg" alt="">
                      <p>7th<br />
                      张杰</p>
                  </div>
                  <div class="songsinger">
                      <img src="images/singer8.jpg" alt="">
                      <p>8th<br />
                      许嵩</p>
                  </div>
                  <div class="songsinger">
                      <img src="images/singer9.jpg" alt="">
                      <p>9th<br />
                      郑源</p>
                  </div>
                  <div class="songsinger2">
                       
                      <p>10--李荣浩</p>
                      <span id="up" class="glyphicon glyphicon-arrow-up"></span>
                      <p>11--刘德华</p>
                      <span id="nom" class="glyphicon glyphicon-minus"></span>
                      <p>12--杨宗纬</p>
                      <span id="down" class="glyphicon glyphicon-arrow-down"></span>
                  </div>
                  <div class="songsinger2">

                      <p>13--孙子涵</p>
                      <span id="down" class="glyphicon glyphicon-arrow-down"></span>
                      <p>14--汪苏泷</p>
                      <span id="nom" class="glyphicon glyphicon-minus"></span>
                      <p>15--张信哲</p>
                      <span id="nom" class="glyphicon glyphicon-minus"></span>
                  </div>
                  <div class="songsinger2">                    
                      <p>16--李克勤</p>
                      <span id="nom" class="glyphicon glyphicon-minus"></span>
                      <p>17--徐良</p>
                      <span id="down" class="glyphicon glyphicon-arrow-down"></span>
                      <p>18--谭咏麟</p>
                      <span id="up" class="glyphicon glyphicon-arrow-up"></span>
                  </div>
                  <div class="songsinger2">
                      <p>19--鹿晗</p>
                      <span id="down" class="glyphicon glyphicon-arrow-down"></span>
                      <p>20--汪峰</p>
                      <span id="nom" class="glyphicon glyphicon-minus"></span>
                      <p>21--刀郎</p>
                      <span id="nom" class="glyphicon glyphicon-minus"></span>
                  </div>
                  <div class="songsinger2">                     
                      <p>22--高安</p>
                      <span id="down" class="glyphicon glyphicon-arrow-down"></span>
                      <p>23--威仔</p>
                      <span id="down" class="glyphicon glyphicon-arrow-down"></span>
                      <p>24--小沈阳</p>
                      <span id="nom" class="glyphicon glyphicon-minus"></span>
                  </div>
                  <div class="songsinger2">
                      <p>25--周传雄</p>
                      <span id="down" class="glyphicon glyphicon-arrow-down"></span>
                      <p>26--张宇</p>
                      <span id="up" class="glyphicon glyphicon-arrow-up"></span>
                      <p>27--许巍</p>
                      <span id="nom" class="glyphicon glyphicon-minus"></span>
                  </div>

             </div>        
                <div class="row" id="search">                  
                      <div class="col-lg-6">
                         <div class="input-group">
                            <input type="text" class="form-control" placeholder="Search for..." id="search_position">
                            <span class="input-group-btn">
                            <button class="btn btn-default" type="button" id="search_position2"><img src="images/search.jpg" alt=""></button>
                            </span>
                        </div>
                        <div id="album"></div>
                      </div>
                </div>
             <div id="albumbody">
                 <div class="album">
                       <img src="images/album1.jpg" alt="">
                       <p>周杰伦的床边故事</p>
                       <p>唱片公司：杰威尔音乐</p>
                       <p>发行时间：2016-08-03</p>
                 </div>
                 <div class="album">
                     <img src="images/album2.jpg" alt="">
                     <p>雨后星空</p>
                     <p>唱片公司：丰华唱片</p>
                     <p>发行时间：2016-08-02</p>
                 </div>
                 <div class="album">
                     <img src="images/album4.jpg" alt="">
                     <p>亲爱的翻译官 电视剧原声带</p>
                     <p>唱片公司：谭旋音乐工作室</p>
                     <p>发行时间：2016-07-07</p>
                 </div>
                 <div class="album">
                     <img src="images/album6.jpg" alt="">
                     <p>一路向南</p>
                     <p>唱片公司：湖南弗彗影像文化传媒有限公司</p>
                     <p>发行时间：2016-06-30</p>
                 </div>
                 <div class="album">
                     <img src="images/albm7.jpg" alt="">
                     <p>非童小可</p>
                     <p>唱片公司：极韵文化</p>
                     <p>发行时间：2016-06-30</p>
                 </div>
                 <div class="album">
                     <img src="images/album8.jpg" alt="">
                     <p>我想</p>
                     <p>唱片公司：福茂唱片</p>
                     <p>发行时间：2016-06-30</p>
                 </div>
                 <div class="album">
                     <img src="images/album9.jpg" alt="">
                     <p>Gussanova Ⅱ</p>
                     <p>唱片公司：中国唱片总公司</p>
                     <p>发行时间：2016-06-30</p>
                 </div>
                 <div class="album">
                     <img src="images/album10.jpg" alt="">
                     <p>做最好的我</p>
                     <p>唱片公司：致力音乐</p>
                     <p>发行时间：2016-06-30</p>
                 </div>
                 <div class="album">
                     <img src="images/album11.jpg" alt="">
                     <p>爱伤了你痛了我</p>
                     <p>唱片公司：新月演艺</p>
                     <p>发行时间：2016-06-12</p>
                 </div>
                 <div class="album">
                     <img src="images/album12.jpg" alt="">
                     <p>破影而出</p>
                     <p>唱片公司：</p>
                     <p>发行时间：2016-06-12</p>
                 </div>
             </div>
             <div id="pankbody">
                 <div id="songList">
                      <div class="song" id="btn1" >
                         <input type="checkbox" value="zz" />
                       
                              <span  class="sonsinger1">zz</span>  
                              <span  class="songname1">z</span>
                              <div class="songIcon" >
                                <a href="javascript:void(0)" /> 
                                   <button class="glyphicon glyphicon-star-empty" value="btn1" onclick="show('light')" > </button>
                                </a>
                              </div>
                            
                             <a href="">
                               <div class="songIcon" >
                                  <span  class="glyphicon glyphicon-headphones"></span>
                                </div>                               
                             </a>
                        </div>
                 </div>               
           </div>
           <div id="pankbody">
                 <div id="songList">
                      <div class="song" id="btn1">
                         <input type="checkbox" value="zz" />
                         <span class="sonsinger1">zz</span>  
                         <span class="songname1">zzz</span>            
                           <a href="javascript:void(0)" >
                             <div class="songIcon" >
                                 <button class="glyphicon glyphicon-star-empty"  onclick="show('light')" value="btn1"> </button>
                             </div>
                           </a>                              
                             <a href="">
                                 <div class="songIcon" >
                                   <span  class="glyphicon glyphicon-headphones"></span>
                                 </div>
                              </a>                         
                      </div>               
           </div>
        </div>   
        <div id="bottom">
              <p></p>
              <p>[1]</p>
        </div> 
       
    </div>

<div id="fade" class="black_overlay"></div>
</body>
</html>